<template>
	<view class="card-viewer-list">
		<!-- 统计信息 -->
		<view class="statistics">
			<view class="stat-item">
				<text class="number">{{options.sumNum || 0}}</text>
				<text class="label">总查看</text>
			</view>
			<view class="stat-item">
				<text class="number">{{options.dayNum || 0}}</text>
				<text class="label">今日查看</text>
			</view>
		</view>

		<!-- 列表容器 -->
		<view class="viewer-list">
			<view @tap="handleContact(item)" v-for="(item, index) in viewerList" :key="index" class="viewer-item">
				<view class="user-info">
					<image class="avatar" :src="getAvatar(item)" mode="aspectFill"></image>
					<view class="info-content">
						<!-- 名片用户 -->
						<template v-if="item.card">
							<view class="name-row">
								<text class="name mr-20">{{item.card.name || ''}}</text>
								<text class="position mr-20">{{item.card.position.position || ''}}</text>
								<text v-if="item.card.is_real === 2" class="tag">已实名</text>
							</view>
							<text class="company line-1">{{item.card.position.company_name || ''}}</text>
							<text class="view-time">{{$timer.timeToHow(item.create_time)}}查看了你</text>
						</template>
						<!-- 普通用户 -->
						<template v-else>
							<view class="name-row">
								<text class="name">{{item.user.nickname || ''}}</text>
							</view>
							<text class="view-time">{{$timer.timeToHow(item.create_time)}}查看了你</text>
						</template>
					</view>
				</view>
				<!-- 只有名片用户才显示联系按钮 -->
				<button v-if="item.card" class="contact-btn" style="margin-left: 10rpx;" >
					立即联系
				</button>
			</view>
		</view>
		<!-- 加载更多 -->
		<uni-load-more :status="loadMoreStatus" v-if="viewerList.length > 10"></uni-load-more>
	</view>
</template>

<script>
	import {
		getRecord
	} from "@/api/extend.js";
	export default {
		data() {
			return {
				options: {},
				card_id: '',
				totalViews: 0,
				todayViews: 0,
				viewerList: [],
				// 分页参数
				pagination: {
					page: 1,
					total: 0,
					per_page: 10,
					last_page: 1
				},
				loadMoreStatus: 'more' // 加载更多状态：more-加载前，loading-加载中，noMore-没有更多了
			}
		},
		onLoad(options) {
			this.options = options;
			this.card_id = options.id
			this.getViewerList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pagination.page = 1
			this.viewerList = []
			this.getViewerList().then(() => {
				uni.stopPullDownRefresh()
			})
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.pagination.page >= this.pagination.last_page) {
				this.loadMoreStatus = 'noMore'
				return
			}
			this.loadMoreStatus = 'loading'
			this.pagination.page++
			this.getViewerList()
		},
		methods: {
			// 获取查看记录列表
			async getViewerList() {
				const res = await getRecord({
					card_id: this.card_id,
					page: this.pagination.page,
					limit: 10
				})

				if (res.status === 200) {
					const {
						data
					} = res;

					// 更新分页信息
					this.pagination = {
						page: data.current_page,
						total: data.total,
						per_page: data.per_page,
						last_page: data.last_page
					}

					// 更新总查看数
					this.totalViews = data.total

					// 追加数据
					this.viewerList = [...this.viewerList, ...data.data];

					// 更新加载更多状态
					this.loadMoreStatus = this.pagination.page >= this.pagination.last_page ? 'noMore' : 'more'
				}

			},

			// 获取显示的头像
			getAvatar(item) {
				return item.card ? item.card.avatar : item.user.avatar
			},

			// 联系按钮点击处理
			handleContact(item) {
				
				if(item.card){
					uni.navigateTo({
						url: '/pages/extend/connection/index_desc?id=' + item?.card?.id
					})
				}else{
					uni.showToast({
						title:'该用户未创建名片',
						icon:'none'
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.card-viewer-list {
		padding: 20rpx;
		background: #f5f5f5;
		min-height: 100vh;

		.statistics {
			display: flex;
			padding: 30rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

			.stat-item {
				flex: 1;
				text-align: center;

				.number {
					display: block;
					font-size: 40rpx;
					color: #2979ff;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.label {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.viewer-list {
			.viewer-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 12rpx;

				.user-info {
					display: flex;
					flex: 1;

					.avatar {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.info-content {
						flex: 1;

						.name-row:not(:has(.position)) {
							margin-bottom: 16rpx; // 普通用户名字和时间之间的间距更大

							.name {
								font-size: 32rpx;
								color: #333;
								font-weight: 500;
							}
						}

						.company {
							width: 50vw;
							font-size: 28rpx;
							color: #666;
							margin-bottom: 8rpx;
							display: block;
							max-width: 460rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.view-time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.contact-btn {
					min-width: 140rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #2979ff;
					color: #FFFFFF;
					font-size: 28rpx;
					padding: 0 24rpx;
					border-radius: 32rpx;
					margin: 0;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>